<form class="g-my-form" [formGroup]="formGroup">
  <div class="row">
    <div class="g-top-button-group">
      <!-- <button class="btn btn-secondary mr-3">载入模版</button> -->
      <button class="btn btn-primary" #submitBtn (click)="submit(submitBtn)">发送消息</button>
    </div>
    <div class="col-9">
      <m-card [autoHeight]="true">
        <div card-head>
          <div class="g-card-title">
            新建平台消息
          </div>
        </div>
        <div>
          <div class="form-group">
            <label for="">执行规则：</label>
            <div>
              <mat-radio-group name="period_type" formControlName="period_type">
                <mat-radio-button [value]="TaskPeriod.Now" class="mr-3">立即执行</mat-radio-button>
                <mat-radio-button [value]="TaskPeriod.Timing" class="mr-3"
                  >定时执行</mat-radio-button
                >
                <mat-radio-button [value]="TaskPeriod.Schedule" class="mr-3"
                  >周期执行</mat-radio-button
                >
              </mat-radio-group>
            </div>
          </div>
          <ng-container [ngSwitch]="formGroup.value.period_type">
            <div class="form-group form-inline" *ngSwitchCase="TaskPeriod.Timing">
              <m-timing name="date_time" formControlName="date_time"></m-timing>
            </div>
            <div class="form-group form-inline" *ngSwitchCase="TaskPeriod.Schedule">
              <m-schedule name="week_time" formGroupName="week_time"></m-schedule>
            </div>
          </ng-container>
          <div class="form-group">
            <label for="">接收人：</label>
            <div
              class="receiver form-control"
              *ngIf="formGroup.get('receiver') as receiver"
              [class.ng-touched]="receiver.touched"
              [class.ng-invalid]="receiver.invalid"
            >
              <ng-container *ngFor="let zone of receiver.value?.zones">
                <span class="zone">{{ zone.id ? zone.name : '全部区域' }} - 全部人员</span>
              </ng-container>
              <ng-container *ngFor="let user of receiver.value?.users">
                <span class="user">{{ user.full_name }}</span>
              </ng-container>
              <div class="subtitle">请选择接收人</div>
            </div>
          </div>
          <div class="form-group">
            <label for="title">标题：</label>
            <input
              id="title"
              type="text"
              class="form-control"
              formControlName="title"
              maxlength="30"
            />
          </div>
          <div class="form-group">
            <label for="content">内容：</label>
            <textarea
              id="content"
              class="form-control"
              formControlName="content"
              maxlength="300"
            ></textarea>
          </div>
        </div>
      </m-card>
    </div>
    <div class="col-3">
      <m-receiver name="receiver" formControlName="receiver"></m-receiver>
    </div>
  </div>
</form>
